Until recently the free site search provided by Yahoo and Google were less than ideal. When a user searched from your website, they would be taken to a search results page that was jarringly different from the page where they entered their search query.
For example, let’s look at SEOmoz.org, which has a beautiful design and a nice tight little search box so that their users can find anything at all they want on the SEOmoz website…
But when you put a search term (let’s search for “Rand Fishkin”) in that box and press “search,” you get redirected to another page that is quite a lot less pretty..
What the poop? Okay, the desired search results can be found, but wouldn’t it rock if those results showed up more like this?…
The above image is using Google custom search results. It looks sweet, and since the results are integrated into the site design, it doesn’t confuse anyone doing a search.
I rank the Google custom search as one of the best, free ways to improve a user’s experience and improve your (or a client’s) site. It has an “Wow” factor with clients that is huge, yet it is free and really simple to do.
It only took me about twenty minutes to make a custom search engine that searches SEOmoz and displays the results within their own very spiffy layout. It is really that simple. You can make money with it too!
Google took the lead when they created the ability to seamlessly integrate search results into a website’s design. I have not seen as many people as I expected to take advantage of it; I do not know if the reason for this is because people don’t know about it, or if they just don’t want to figure it out.
If you want to make your site searchable like this, here is how to do so:
1) Create a search results page for your site.
Make a copy of a webpage within your site that has the desired design elements on it and then name it “searchresults.html” (or whatever you want). For the above example using SEOmoz, I copied their “services page” and just called it “seomoz.html”. This new page will be where your search engine results will be displayed by Google, and when we create our new search engine we will be asked to enter a URL where we want our results displayed. It is easier to make this page first and have it live on your server. More on this later…
2) Create the search engine. (Don’t worry, it is super duperly easy.)
Go to the Google Coop page and click the “Create a Search Engine” button.
You will be asked to sign in to your Google account. If you do not have a Google account, follow the instructions to create one. Once you are logged in, you will see a page with a form on it…
Here is what all the fields are and what I suggest you put it them:
Search engine name: This name used to be displayed in the search results but isn’t any more, so you can name it whatever you want. I named it “SEOmoz example,” but a good name for yours would be “yourdomainname”.
Search engine description: Since we are making this search engine for a site search, let’s describe it as “yourdomainname site search.”
Search engine keywords: Oddly, you must do this or else it won’t let you go to the next step, so for the SEOmoz example, I just put “seo.” Just put a couple of your keywords there.
Choose your language from the drop down menu.
Now we scroll down the page where we have some more settings to set.
Sites to search: Put the url of your site here. For the SEOmoz example I put “https://moz.com.”
Pay attention to the next setting!!!!!
How to search these sites: Choose “Search only these sites” <--- Very important for your site search
Advertising status: You can choose to display ads or not here; for simplicity’s sake I chose not to display ads for this example.
Check that terms of service box (if you have read and agree to them, of course).
Press next.
Okay, even though you didn’t realize it, you are already done creating your search engine. You rock!
This page allows us to test it to see if it works the way we want to. For the SEOmoz test, I put “Rand Fishkin” into the above search box and hit the “search” button and this is what I saw…
In addition to being both handsome and wonderful, I am also now the creator of a search engine that works.
I know it works because I got results about my search query and they are all from SEOmoz.org (if you get results from other sources than your website, you didn’t follow my instructions and are bad and you will have to go back and choose “Search only these sites” on the first form).
Okay, the search engine works. What is the next step to get it onto our website?
Click the “finish” button on the bottom of the page you are now on. You will be taken to a new screen called “My search engines”…
3) Customize your search engine using the control panel.
You can now choose what to do with your new search engine. To continue making our site search, we must click on the “control panel” link to go tweak some settings.
The control panel looks like this:
It sorta looks like the first screen we were on, but now there are some options along the top which I have circled above.
Now we are going to click on the “code” link. You will see…
Ignore what you see and scroll down the page all the way until you see…
Click the little + (plus sign) thing next to “Search box and search results code for your website.” It should look like this when you do….
Okay, now you are in the right place, and this is where we get some code to integrate our search results into our website.
We have to choose a search box. For purposes of this example, I chose the “watermark” search box (it seems the least obtrusive to me). On your web pages, this search box looks like this:
Choose your search box, then hit “save changes.”
Now it asks us to enter a url where we want our search results to be displayed on. This is where that page we made in Step One comes in. If you made a page called “searchresults.html,” then you would put “http://www.yourdomain.com/searchresults.html” in this field. For my SEOmoz search engine, I put “http://www.feedthebot.com/seomoz.html” because that is the page I made for this example.
press “save changes” after you enter the URL.
Scrolling down a little, you will see two windows with code in them:
You now have done everything you need to do on the “Google side” of things (but keep the page up, because you will need the codes in those windows in a minute). Now you have to do stuff on your web page.
4) Making your Search results page.
As I told you in step one, you have to create a page for your search results. When I was looking through the SEOmoz website, I noticed that with very little changing, their “services” page could become a “search results” page. This is how I came to that decision…
Okay, so I took their “services” page and saved it as “searchresults.html.”
I then made the cosmetic changes necessary to make this page a search results page; specifically, I changed the place where it says “Our Services” and wrote instead “Search Results.” I then took all of the content that starts with “Basics about our Services” and deleted it all, leaving the divisions the way I found them.
I then copied and pasted the code found on the Google page; specifically, the code that they have cryptically labeled “Place this code in the page where you’d like your search engine results to appear” (the code from the lower window).
Okay, our search results page is done. You may have to do some tinkering, but basically, it really is as simple as copying and pasting that code into the place you want the results to appear.
5) Insert the search box into your website.
We are pretty much finished. We just have to enter the search box somewhere (or many somewheres) on our website. To insert it, you basically have to decide where you want it. To keep things simple here, let’s just say you want it on a search page, if you have something like, “Hey! Wanna search my site?”, then you would put the code from the first window (cryptically labeled “Put this code in the page where you want your search box to appear”) next to it. It would now look like this:
Hey!, wanna search our site? Go fer it.
Okay, now you are done.
For my SEOmoz example, when I search for “Rand Fishkin” I see …
Purrrfect. Love it. There are many things that you can do to further customize your search engine (change colors, put ads on it, etc.) But for now, I am spent.
My name is Patrick Sexton, my site is feedthebot.com, which describes the Google webmaster guidelines in simple terms.
